<template>
<div class="layout">
  <div class="background"> 
  <!-- 最新进展 -->
    <div class="title">疫情可视化平台</div>
    <div class="title">最新进展</div>
     </div>
    <div class="news_list">
      <!-- 新闻 -->
      <div class="news" v-for="(article,index) in articles.list" :key="article.id" >
        <div class="time">
          <span class="circle"></span>
          <span class="latest" v-if="index === 0">最新</span>
          <strong>{{article.publishTime | fmtDate}}</strong>

        </div>
        <div class="content">
            <el-button type="text" @click="toDetails(article)">{{article.title}}</el-button>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-if="articles.total > param.pageSize"
      layout="prev, pager, next"
      @current-change="currentChangeHandler"
      :current-page="param.page"
      :page-size="param.pageSize"
      :total="articles.total">
    </el-pagination>
   
    <!-- 模态框 -->
    <el-dialog
      title="最新进展"
      :visible.sync="dialogVisible"
      width="80%">
      <div v-html="article.content"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {get} from '@/utils/request'
export default {
  data(){
    return {
      dialogVisible:false,
      param:{
        page:1,
        pageSize:10,
        categoryId:3
      },
      epidemics:{},
      articles:{},
      article:{}    // 当前这篇文章
    }
  },
  created(){
    this.loadArticleData();
    this.loadEpidemicData();
  },
  methods:{
    // 打开详情
    toDetails(article){
      this.article = article;
      this.dialogVisible = true;
    },
     // 加载新闻资讯
    loadArticleData(){
      let url = "/article/pageQuery";
      get(url,this.param).then(response => {
        this.articles = response.data;
      });
    },
    //加载所有疫情数据
    loadEpidemicData(){
      let url = "/epidemic/pageQuery";
      get(url,{
        page:1,
        pageSize:20
      }).then(response => {
        this.epidemics = response.data;
      })
    },
    // 翻页
    currentChangeHandler(page){
      this.param.page = page;
      this.loadArticleData();
    }
  }
}
</script>

<style scoped>
/* 最新进展 */
.news_list {
  background-color: #dff0c3;
  padding: 1em;
}
.news_list > .news {
  margin-top: .5em;
}
.news_list > .news > .time {
  line-height: 2.5em;
}
.news_list > .news > .content {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1em;
  color: #1f1010;
  line-height: 1.5em;
  font-size: 14px;
}
.news_list .circle {
  display: inline-block;    /*行内块 */
  width: 10px;
  height: 10px;
  background-color: #131416;
  border-radius: 50%;
}
.news_list .latest {
  display: inline-block;
  background-color: #f43b3b;
  color: #ffffff;
  padding: 0 .4em;
  font-size: 16px;
  border-radius: 3px;
  line-height: 1.6em;
}
.title {
  line-height: 2em;
  color: #fa500c;
  font-size: 18px;
}
.background{
  background-image: url("../../assets/bg3.png");
   height: 160px;
  background-size: cover;
  margin: -.5em;
  margin-bottom: 1em;
  padding: 1em;
  color: #ffffff;
}
.background > .title {
  line-height: 2em;
  font-size: 30px;
  font-weight: bold;
}
</style>

